﻿@model SmartAdmin.WebUI.Data.Models.ApplicationUser
@{
  /**/
  ViewData["Title"] = "登录账号";
  ViewData["PageName"] = "accountmanage_index";
  ViewData["Heading"] = "<i class='fal fa-users text-primary'></i>  登录账号";
  ViewData["Category1"] = "系统管理";
  ViewData["PageDescription"] = "";
}
@section HeadBlock {

  <link href="~/css/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.css" rel="stylesheet" asp-append-version="true" />
  <link href="~/js/easyui/themes/insdep/easyui.css" rel="stylesheet" asp-append-version="true" />
  <link href="~/js/plugin/jquery.fileuploader/jquery.fileuploader.min.css" rel="stylesheet" asp-append-version="true" />
  <link href="~/js/plugin/jquery.fileuploader/jquery.fileuploader-theme-dragdrop.css" rel="stylesheet" asp-append-version="true" />
  <link href="~/js/plugin/jquery.fileuploader/font/font-fileuploader.css" rel="stylesheet" asp-append-version="true" />
  <link href="~/css/formplugins/cropperjs/cropper.css" rel="stylesheet"  asp-append-version="true" />
  <style>
    .overlay {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.5);
      overflow: hidden;
      height: 0;
      transition: .5s ease;
      width: 100%;
    }

    .avatars:hover .overlay {
      height: 50%;
      cursor: pointer;
    }

    .avatars {
      position: relative;
      border-radius: 50%;
    }

    .text {
      color: #333;
      position: absolute;
      top: 30%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }

    img {
      display: block !important;
      /* This rule is very important, please don't ignore this */
      max-width: 100%;
    }
    /*.img-container {
      min-height: 400px;
      margin-bottom:0px;
    }*/
  </style>
}

<div class="row">
  <div class="col-lg-12 col-xl-12">
    <div id="panel-1" class="panel">
      <div class="panel-hdr">
        <h2>
          登录账号
        </h2>
        <div class="panel-toolbar">
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"><i class="fal fa-window-minimize"></i></button>
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"><i class="fal fa-expand"></i></button>
          @*<button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"><i class="fal fa-times"></i></button>*@
        </div>

      </div>
      <div class="panel-container enable-loader show">
        <div class="loader"><i class="fal fa-spinner-third fa-spin-4x fs-xxl"></i></div>
        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0  text-muted bg-faded bg-subtlelight-fade">
          <div class="row no-gutters align-items-center">
            <div class="col">
              <!-- 开启授权控制请参考 @@if (Html.IsAuthorize("Create") -->
              <div class="btn-group btn-group-sm ">
                <button name="searchbutton" onclick="reloadData()" class="btn btn-default"> <span class="fal fa-search mr-1"></span> 刷新 </button>
              </div>
              <div class="btn-group ">
                <button name="resetpasswordbutton" onclick="resetpassword()" class="btn btn-sm btn-primary"> <i class="fal fa-key mr-1"></i> 重置密码 </button>
              </div>
              <div class="btn-group ">
                <button name="lockoutbutton" onclick="setlockout()" class="btn btn-sm btn-danger"> <i class="fal fa-user-lock mr-1"></i> 禁用账号 </button>
              </div>
              <div class="btn-group ">
                <button name="unlockbutton" onclick="setunlockout()" class="btn btn-sm btn-success"> <i class="fal fa-unlock-alt mr-1"></i> 恢复账号 </button>
              </div>
              <div class="btn-group btn-group-sm ">
                <button name="registbutton" onclick="registuser()" class="btn btn-default"> <span class="fal fa-plus mr-1"></span> 注册新账号 </button>
              </div>
              <div class="btn-group btn-group-sm ">
                <button name="deletebutton" disabled onclick="removeusers()" class="btn btn-default"> <span class="fal fa-times mr-1"></span> 删除账号 </button>
              </div>


              <div class="btn-group btn-group-sm hidden-xs ">
                <button name="importbutton" type="button" onclick="importexcel('ApplicationUser')" class="btn btn-default"><span class="fal fa-cloud-upload mr-1"></span> 导入 </button>
                <button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                  <button name="downloadbutton" class="dropdown-item js-waves-on" href="javascript:downloadtemplate()"><span class="fal fa-download"></span> 下载模板 </button>
                </div>
              </div>
              <div class="btn-group btn-group-sm ">
                <button name="exportbutton" onclick="exportexcel()" class="btn btn-default"> <span class="fal fa-file-excel mr-1"></span>  导出 </button>
              </div>
            </div>

          </div>

        </div>
        <div class="panel-content">
          <div class="table-responsive">
            <table id="users_datagrid"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<partial name="_ImportWindow" />
<partial name="_ResetPasswordPartial" />
<partial name="_RegisterFormPartial" />
<!-- END MAIN CONTENT -->

@section ScriptsBlock {
  <script src="~/js/dependency/moment/moment.js" asp-append-version="true"></script>
  <script src="~/js/dependency/numeral/numeral.min.js" asp-append-version="true"></script>
  <script src="~/js/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.js" asp-append-version="true"></script>
  <script src="~/js/easyui/jquery.easyui.min.js" asp-append-version="true"></script>
  <script src="~/js/easyui/plugins/datagrid-filter.js" asp-append-version="true"></script>
  <script src="~/js/easyui/plugins/columns-ext.js" asp-append-version="true"></script>
  <script src="~/js/easyui/plugins/columns-reset.js" asp-append-version="true"></script>
  <script src="~/js/easyui/locale/easyui-lang-zh_CN.js" asp-append-version="true"></script>
  <script src="~/js/easyui/jquery.easyui.component.js" asp-append-version="true"></script>
  <script src="~/js/jquery.extend.formatter.js" asp-append-version="true"></script>
  <script src="~/js/jquery.custom.extend.js" asp-append-version="true"></script>
  <script src="~/js/plugin/filesaver/FileSaver.js" asp-append-version="true"></script>
  <script src="~/js/plugin/filesaver/jquery.fileDownload.js" asp-append-version="true"></script>
  <script src="~/js/plugin/jquery.fileuploader/jquery.fileuploader.min.js" asp-append-version="true"></script>
  <script src="~/js/plugin/jquery.serializejson/jquery.serializejson.js" asp-append-version="true"></script>
  <script src="~/js/formplugins/cropperjs/cropper.js" asp-append-version="true"></script>
  <script type="text/javascript">
    //全屏事件
    document.addEventListener('panel.onfullscreen', () => {
      $dg.treegrid('resize');
    });
    //禁用账号
    function setlockout() {
      const userid = $dg.datagrid('getChecked').map(x => x.Id);
      if (userid.length > 0) {
        $.post('/AccountManage/SetLockout', { userid: userid }).done(res => {
          reloadData();

        });
      }
    }
    function setunlockout() {
      const userid = $dg.datagrid('getChecked').map(x => x.Id);
      if (userid.length > 0) {
        $.post('/AccountManage/SetUnLockout', { userid: userid }).done(res => {
          reloadData();

        });
      }
    }
    //执行Excel到处下载
    function exportexcel() {

    }
    function downloadtemplate() {
      //默认模板路径存放位置
      const url = '/FileUpload/Download?file=/ExcelTemplate/Accounts.xlsx';
      $.fileDownload(url)
        .done(() => {
          //console.log('file download a success!');
          toastr.success('模板下载完成!');
        })
        .fail(() => {
          $.messager.alert('下载模板失败', '没有下载到导入模板[Accounts.xlsx]文件!', 'error');
        });
    }
   //显示帮助信息
    function resetpassword() {
        var row = $dg.datagrid('getChecked');
        if (row.length === 0) {
            $.messager.alert("提示", "请选中需要重置密码的记录!");
        } else {
            //console.log(row);
            showresetform(row[0].Id, row[0].UserName);
        }
    }
    function reloadData() {
      $dg.datagrid('unselectAll');
      $dg.datagrid('uncheckAll');
      $dg.datagrid('reload');

    }

    var $dg = $('#users_datagrid');
    function edituser(user) {
      showedituserform(user)
    }
    function registuser() {
      showregisterform();
    }
    function removeusers() {
      const rows = $dg.datagrid('getChecked');
      if (rows.length > 0) {
        var id = rows.filter(item => item.Id != null).map(item => {
          return item.Id;
        });
        $.messager.confirm('确认', `你确定要删除这 <span class='badge badge-icon position-relative'>${id.length}</span> 个账号?`, result => {
          if (result) {
            $.post('/AccountManage/DeleteCheckedUser', { id: id })
              .done(response => {
                if (response.success) {
                  toastr.success('删除成功', '确认', { timeOut: 2000 });
                  $dg.datagrid('uncheckAll');
                  $dg.datagrid('reload');
                } else {
                  $.messager.alert('错误', response.err, 'error');
                }
              })
              .fail((jqXHR, textStatus, errorThrown) => {
                //console.log(errorThrown);
                $.messager.alert('失败', errorThrown, 'error');
              });
          }
        });
      } else {
        $.messager.alert('提示', '请选择要删除的账号');

      }
    }



    $(function () {
      $dg.datagrid({
        rownumbers: true,
        checkOnSelect: false,
        selectOnCheck: false,
        idField: 'Id',
        sortName: 'Id',
        sortOrder: 'desc',
        remoteFilter: true,
        singleSelect: false,
        method: 'get',
        pagination: true,
         clientPaging: false,
        striped: true,
        onDblClickRow: function (index, row) {
          edituser(row);
        },
        onBeforeLoad: function () {
          $('.enable-loader').removeClass('enable-loader')
        },
        onLoadSuccess: function (data) {
          editIndex = undefined;
          $("button[name*='deletebutton']").prop('disabled', true);
        },
        onSelect: function (index, row) {
            menuitem = row;
          },
          onCheck: function (index,row) {
             $("button[name*='deletebutton']").prop('disabled', false);
            menuitem = row;
        },
        onUncheck: function () {
          const checked = $(this).datagrid('getChecked').length > 0;
          $("button[name*='deletebutton']").prop('disabled', !checked);
        },
        onCheck: function () {
          $("button[name*='deletebutton']").prop('disabled', false);
        },
        onBeforeEdit: function (index, row) {
            row.editing = true;
            $(this).datagrid('refreshRow', index);
        },
        onCancelEdit: function (index, row) {
          row.editing = false;
          editIndex = undefined;
          $(this).datagrid('refreshRow', index);
        },
        columns: [[
          { field: 'ck', checkbox: true },
          {
            field: 'status',
            title: '状态',
            formatter: function (v, r, i) {
              if (r.LockoutEnd == null) {
                return '<span class="badge badge-info">正常</span>'
              } else {
                if (moment(r.LockoutEnd) > moment()) {
                  return '<span class="badge badge-danger">锁定</span>'
                } else {
                  return '<span class="badge badge-info">正常</span>'
                }
              }
            }
          },
          {
            field: 'UserName',
            title: '账号',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '账号', required: true, validType: 'length[0,128]' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'GivenName',
            title:  '昵称',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '昵称', required: true, validType: 'length[0,128]' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'Email',
            title: '电子邮件',
            width: 240,
            editor: {
              type: 'textbox',
              options: { prompt: '电子邮件', required: true, validType: 'email' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'PhoneNumber',
            title: '电话号码',
            width: 140,
            editor: {
              type: 'textbox',
              options: { prompt: '电话号码', required: false, validType: 'length[0,128]' }
            },
            sortable: true,
            resizable: true
          },
          {
            field: 'TenantId',
            title: '@Html.DisplayNameFor(model => model.TenantId)',
            width: 160,
            formatter: function (value, row, index) {
              return row.TenantName
            }
          },
          {
            field: 'IsOnline',
            title: '是否在线',
            width: 90,
            sortable: true,
            resizable: true,
            formatter: booleanformatter
          }

        ]]
      })
      .datagrid('enableFilter', [
        {
          field: 'TenantId',
          type: 'combobox',
          options: {
            valueField: 'Id',
            panelHeight: 'auto',
            textField: 'Name',
            method: 'post',
            url: '/AccountManage/GetTenantData',
            onChange: value => {
              if (value === '' || value === null) {
                $dg.datagrid('removeFilterRule', 'TenantId');
              } else {
                $dg.datagrid('addFilterRule', {
                  field: 'TenantId',
                  op: 'equal',
                  value: value
                });
              }
              $dg.datagrid('doFilter');
            }
          }
        }])
        .datagrid('load', '/AccountManage/GetData');
    });
  </script>

}

